<template>
  <sui-modal v-model="search.modal.open" style="height:100%;width:100%">
    <sui-modal-header style="padding:0!important">
      <div class="ui icon input modal-search-container">
        <button class="ui icon button modal-search-button" style="left: 0em;" @click="modalToggle">
          <i class="arrow left icon"></i>
        </button>
        <input id="search-input" type="search" placeholder="Search..." v-model.lazy.trim="searchText" @keyup.enter="submit">
        <button class="ui icon button modal-search-button" style="right: 0em;">
          <i class="times icon"></i>
        </button>
        <sui-dropdown id="search-set" class="icon modal-search-button" icon="ellipsis vertical" button>
          <sui-dropdown-menu>
            <sui-dropdown-item @click="toggleSearchModalFilter">{{searchFilter.open ? '关闭简单筛选':'简单筛选'}}</sui-dropdown-item>
            <sui-dropdown-item>高级(开发中)</sui-dropdown-item>
          </sui-dropdown-menu>
        </sui-dropdown>
      </div>
    </sui-modal-header>
    <sui-modal-content style="padding: 0rem!important;height:100%;background: #e6ecf0;">
      <sui-list divided relaxed style="background:white;margin-bottom: 7px;" v-if="searchFilter.open">
        <sui-list-item style="padding:0;">
          <sui-list-content style="display: flex;">
            <a is="sui-list-description" style="display:flex;justify-content: space-around;">
              <div class="ui checkbox">
                <input type="checkbox">
                <label>本系</label>
              </div>
              <div class="ui checkbox">
                <input type="checkbox">
                <label>在校</label>
              </div>
              <div class="ui checkbox">
                <input type="checkbox">
                <label>在线</label>
              </div>
            </a>
          </sui-list-content>
        </sui-list-item>
      </sui-list>
      <sui-list divided relaxed style="height:100%;background:white;" v-bind:style="{marginTop:(searchFilter.open ? '7px':'0px')}">
        <sui-list-item style="padding:0 0 0 10px;border-top: 1px solid rgba(34,36,38,.15);">
          <sui-list-content style="display: flex;">
            <a is="sui-list-description">清空历史记录</a>
            <button class="ui icon button modal-search-button" style="right: 0em;padding: 0 0.7em !important;">
              <i class="circular times icon"></i>
            </button>
          </sui-list-content>
        </sui-list-item>
        <sui-list-item v-for="n in 4" :key="n" style="padding:0 0 0 10px;">
          <sui-list-content style="display: flex;">
            <a is="sui-list-description">Updated 10 mins ago</a>
            <button class="ui icon button modal-search-button" style="right: 0em;padding: 0 1.1em !important;">
              <i class="times icon"></i>
            </button>
          </sui-list-content>
        </sui-list-item>
      </sui-list>
    </sui-modal-content>
  </sui-modal>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
export default {
  name: "zui-search-modal",
  computed: {
    ...mapGetters(["search", "searchFilter", "header"]),
    searchText: {
      get() {
        return this.$store.state.app.header.searchText;
      },
      set(value) {
        const playload = {
          key: "searchText",
          value: value
        };
        this.$store.dispatch("set_header_menu", playload);
      }
    }
  },
  methods: {
    ...mapActions([
      "toggleSearchModal",
      "handleSearchModal",
      "toggleSearchModalFilter",
      "handleSearchModalFilter"
    ]),
    pushHistory() {
      var state = {
        title: "搜索栏搜索",
        url: "#"
      };
      window.history.pushState(state, "搜索栏搜索", "#");
    },
    modalToggle() {
      if (window.screen.width <= 768) {
        if (this.search.modal.open == false) {
          this.pushHistory();
        } else {
          window.history.back();
        }
        this.toggleSearchModal();
      }
    },
    submit(value) {
      const playload = {
        key: "searchText",
        value: value
      };
      this.$store.dispatch("set_header_menu", playload);
    }
  }
};
</script>

<style lang="less" scoped>
#search-set {
  text-align: center;
  & /deep/ .menu {
    right: 0;
    left: auto;
    height: auto;
    width: 130px;
    & .item {
      text-align: center;
      font-size: 16px;
      border-bottom: 1px solid rgba(34, 36, 38, 0.15);
    }
  }
}
#search-input {
  outline: none;
  border: none;
  flex-grow: 10;
  width: 0;
  padding-right: 5px !important;
  &:focus {
    outline: none;
  }
}
.modal-search-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.modal-search-button {
  font-size: 1.1rem !important;
  margin: 0 !important;
  flex-grow: 1;
  background: none !important;
  padding: 1.1em 0.4em !important;
}
/deep/ .ui.standart.modal.transition {
  width: 100%;
  height: 100%;
}
</style>
